import PropTypes from 'prop-types';
import PureRenderMixin from "react-addons-pure-render-mixin"
import React, {Component} from 'react';
import D3Chart from '../D3Chart'
import d3 from './d3';
import './bar.scss';
import T from 'utils/T';


@T.decorator.propTypes({
    data: PropTypes.oneOfType([
        PropTypes.array,
        PropTypes.object,
    ]),
    option: PropTypes.object
})
export default class Force extends D3Chart {
    setDefaultOptions(){
        return {
            width: 400,
            height: 400,
            left:30,
            right:30,
            top:20,
            bottom:30,
            rectPadding: 4,
            color: ['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83',  '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3']

        }
    }

    /**
     * 标准化数据格式
     */
    normalize() {
        const dataInit = this.props.data;
        this.nodes = dataInit.nodes;
        this.edges = dataInit.edges;
    }

    drawChart(){

        const options = this.getOptions();
        //在 wrapper 里添加一个 SVG 画布
        this.chart = d3.select(this.wrapper)     //选择文档中的wrapper元素
            .append('svg')          //添加一个svg元素
            .attr('width', '100%')       //设定宽度
            .attr('height', options.height)    //设定高度
            .style('border', '1px solid #ccc');
        //画布周边的空白
        let padding = {left:options.left, right:options.right, top:options.top, bottom:options.bottom};



        // var force = d3.forceSimulation()
        //     .nodes(this.nodes) //指定节点数组
        //     .size([options.width,options.height]) //指定作用域范围
        //     .linkDistance(150) //指定连线长度
        //     .charge([-400])//相互之间的作用力
        //     .forceLink()
        //     .links(this.edges) //指定连线数组


    }
}
